<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 400px);
        grid-gap: 30px;
      }
      .list {
        width: 400px;
        height: 100px;
        background-color: skyblue;
        margin-top: 40px;
      }
    </style>
  </head>
  <body>
    <h3>如果每一行列数不固定,但是又不能调整 HTML 咋整??</h3>
    <p>
      然而有时候，由于客观原因，前端重构人员没有办法去调整html结构， <br />
      同时布局的列表个数又不固定，这个时候该如何实现我们最后一行左对齐效果呢？
    </p>
    <p>这时候,我们我们不妨可以试试使用Grid布局。</p>
    <p>
      Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。
    </p>
    <div class="container">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>

    <div>
      首先最后一行需要左对齐的布局更适合使用CSS
      grid布局实现，但是，repeat()函数兼容性有些要求，IE浏览器并不支持。 <br />
      如果项目需要兼容IE，则此方法需要斟酌。 <br />
      <p style="font-size: 20px; color: red">
        然后，适用范围最广的方法是使用空的元素进行占位
      </p>
      此方法不仅适用于列表个数不固定的场景， <br />
      对于列表个数固定的场景也可以使用这个方法。 <br />
      但是有些人代码洁癖，看不惯这种空的占位的html标签，则可以试试一开始的两个方法，<br />
      一是动态计算margin，模拟两端对齐， <br />
      另外一个是根据列表的个数，动态控制最后一个列表元素的margin值实现左对齐。
    </div>
  </body>
</html>
